<template>
  <div class="app-container">
    <!--  -->
    <div class="panel" style="width:800px;border-radius: 20px;">
      <!-- 111 -->
      <dv-border-box-1 style="width:800px;">
        <el-form label-width="150px" label-suffix=":" size="small" style="padding: 15px;" disabled>
          <el-row :span="24">
            <el-col :span="12">
              <el-form-item v-for="item1 in form1" :key="item1.id" :label="item1.devName + item1.gasName">
                <div style="display: inline-block;margin-left: 20px;">{{ item1.gasValue }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item v-for="item2 in form2" :key="item2.id" :label="item2.devName + item2.gasName">
                <div style="display: inline-block;margin-left: 20px;">{{ item2.gasValue }}</div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </dv-border-box-1>
    </div>
  </div>
</template>

<script>
import { getList } from '@/api/fjgs/tunnelMonitor.js'
export default {
  data() {
    return {
      loading: false,
      queryParams1: {
        tunnelId: 2
      },
      queryParams2: {
        tunnelId: 1
      },
      form1: {
      },
      form2: {
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      getList(this.queryParams1).then(response => {
        // console.log(response)
        this.form1 = response.data
      })
      getList(this.queryParams2).then(response => {
        // console.log(response)
        this.form2 = response.data
      })
    }
  }
}
</script>

<style lang="scss">
.panel {
  background-image: url('~@/assets/images/statistics/bg.png');
  background-size: cover;
}
</style>
